<template>
<div>
    <div id="answer">
        <transition-group tag="ul" name="fade" class="content">
            <li v-for="(item,index) in chatArr" :key="index" :class="item.nomargin">
                <span v-if="item.title" class="title">第{{item.title}}题/共4题</span>
                <img v-if="item.imgtx" :src="item.imgtx" :class="item.imgclass">
                <img v-else :class="item.imgclass" style="opacity:0;">
                <span v-if="item.text||item.select||item.imgchat||item.video" :class="item.spanclass">
                    {{item.text}}
                    <img v-if="item.imgchat" :src="item.imgchat" :style="{height:item.imgHei}" @click="audioCon(index)" >
                    <video controls v-if="item.video" :src="mp4"></video>
                    <audio v-else-if="item.audio" ref="audio" controls="controls" :src="wav"></audio>
                    <div v-for="(value,key) in item.select" @click="selectAction(key,index)" class="select" :class="value.class">
                        {{value.text}}
                        <div class="iselect" :class="value.iclass"></div>
                    </div>
                </span>
            </li>
        </transition-group>
    </div>
    <cjBtn v-if="cjBtnvalue"></cjBtn>
</div>
</template>

<script>
import mp4 from '../../static/media/b.mp4'
import wav from '../../static/media/a.wav'
import img from '../img.js'
export default {
    name:'answer',
    data(){
        return {
            chatArr:[],
            myScroll:null,
            once:3,
            userAnswer:'',
            cjBtnvalue:false,
            dna:'',
            mp4:mp4,
            wav:wav
        }
    },
    mounted(){
        this.myScroll = new IScroll("#answer",{
		    mouseWheel: true,//鼠标可拖拽
		    scrollbars: true,//滚动条
		    fadeScrollbars: true,//滚动条淡入淡出
		    click: true,//允许点击事件，默认为false
		    tap: true//移动端点击事件，默认为false
        })
        this.wenAction()
    },
    updated(){
        this.myScroll.refresh();
    },
    methods:{
        wenAction(){
            this.chatArr.push({
                nomargin:'nomargin',
                title:1
            })
            this.chatArr.push({
                imgtx:img.touxiang_01,
                text:"路边停着一辆Mazda CX-8，你觉 得谁会从车上下来？"
            })
            this.chatArr.push({
                imgtx:img.touxiang_01,
                imgchat:img.answer_01
            })
            this.chatArr.push({
                select:[{
                    text:'A.气质居家的高颜值暖男'
                },
                {
                    text:'B.穿着考究的精致派绅士'
                }]
            })
            this.scroll();
        },
        wenActionTwo(){
            this.chatArr.push({
                nomargin:'nomargin',
                title:2
            })
            this.chatArr.push({
                imgtx:img.touxiang_01,
                text:"看下列视频，你内心OS是："
            })
            this.chatArr.push({
                imgtx:img.touxiang_01,
                video:true
            })
            this.chatArr.push({
                select:[{
                    text:'A.生而为赢，逆风翻盘'
                },
                {
                    text:'B.人生如旅，一路风景'
                }]
            })
            this.scroll();
        },
        wenActionThree(){
            this.chatArr.push({
                nomargin:'nomargin',
                title:3
            })
            this.chatArr.push({
                imgtx:img.touxiang_01,
                text:"听下面一段音乐，你此时想象自己正："
            })
            this.chatArr.push({
                imgtx:img.touxiang_01,
                imgchat:img.answer_03,
                audio: true,
                imgHei:'32.13vw'
            })
            this.chatArr.push({
                select:[{
                    text:'A.仰卧车中，仰望星空'
                },
                {
                    text:'B.静音驾启，静享愉悦'
                }]
            })
            this.scroll();
        },
        wenActionFour(){
            this.chatArr.push({
                nomargin:'nomargin',
                title:4
            })
            this.chatArr.push({
                imgtx:img.touxiang_01,
                text:"想象一辆Mazda CX-8急驰而过， 你预计前方是："
            })
            this.chatArr.push({
                imgtx:img.touxiang_01,
                imgchat:img.answer_04
            })
            this.chatArr.push({
                select:[{
                    text:'A.井然有序的十字路口'
                },
                {
                    text:'B.空旷无人的辽阔草原'
                }]
            })
            this.scroll();
        },
        daAction(textValue){
            this.chatArr.push({
                imgtx:img.touxiang_02,
                text:textValue,
                imgclass: 'imgright',
                spanclass: 'spanright'
            })
            this.scroll();
            this.userAnswer += textValue.substr(0,1);
        },
        selectAction(key,index){
            for(let item in this.chatArr[index].select){
                this.chatArr[index].select[item].class = '';
                this.chatArr[index].select[item].iclass = '';
            }
            this.chatArr[index].select[key].class = 'beselect';
            this.chatArr[index].select[key].iclass = 'beiselect';

            if(index == this.once && index == 3){
                this.daAction(this.chatArr[index].select[key].text);
                this.wenActionTwo();
                this.once+=5;
            }else if(index == this.once && index == 8){
                this.daAction(this.chatArr[index].select[key].text);
                this.wenActionThree();
                this.once+=5;
            }else if(index == this.once && index == 13){
                this.daAction(this.chatArr[index].select[key].text);
                this.wenActionFour();
                this.once+=5;
            }else if(index == this.once && index == 18){
                this.daAction(this.chatArr[index].select[key].text);
                this.once+=5;
                this.chatArr.push({
                    imgtx:img.touxiang_01,
                    text:"你的最强DNA报告正在出炉！"
                })
                sessionStorage.setItem('userAnswer',this.userAnswer);
                if(this.userAnswer == 'ABAA'||this.userAnswer == 'ABAB'||this.userAnswer == 'ABBA'||this.userAnswer == 'ABBB'){
                    this.generatingPoster('ss',img.chathb_ss);
                }else if(this.userAnswer == 'AAAA'||this.userAnswer == 'AAAB'||this.userAnswer == 'AABA'||this.userAnswer == 'AABB'){
                    this.generatingPoster('jyl',img.chathb_jyl);
                }else if(this.userAnswer == 'BAAB'||this.userAnswer == 'BAAA'||this.userAnswer == 'BABB'||this.userAnswer == 'BABA'){
                    this.generatingPoster('yy',img.chathb_yy);
                }else if(this.userAnswer == 'BBAA'||this.userAnswer == 'BBAB'||this.userAnswer == 'BBBA'||this.userAnswer == 'BBBB'){
                    this.generatingPoster('axg',img.chathb_axg);
                }
            }
        },
        generatingPoster(str,obj){
            this.dna = str;
            setTimeout(()=>{
                this.chatArr.push({
                    imgtx:img.touxiang_01,
                    imgchat:obj,
                    imgHei:'57.2vw'
                })
                this.chatArr.push({
                    imgtx:img.touxiang_01,
                    text:"点击图片长按保存，最强DNA秀 到朋友圈！"
                },{})
                this.scroll();
                this.cjBtnvalue = true;
            },1500)
        },
        scroll(){
            this.$nextTick(()=>{
                this.myScroll.scrollTo(0,this.myScroll.maxScrollY,800);
            })
        },
        audioCon(index){
            if(index == 12){
                if(this.$refs.audio[0].paused){ 
                    this.$refs.audio[0].play();// 播放 
                }else{
                    this.$refs.audio[0].pause();// 暂停
                }
            }else if(index == 21){
                this.$router.push({path:'/savehb',query:{dna:this.dna}});
            }
        }
    }
}
</script>

<style>
#answer{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
	overflow: hidden;
    background: #e5e5ea;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .25s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.content {
    padding: 6.4vw 0 6.4vw 0;
    box-sizing: border-box;
    background: #e5e5ea;
}   
.content li {
    margin: 0 2.66vw 8vw 2.66vw;
    display: block;   
    clear: both;   
    overflow: hidden;   
} 
.content li.nomargin{
    margin: 0;
    padding: 0;
}  
.content li>img {   
    float: left;
    width: 11.2vw;
    height: 11.2vw; 
}   
.content li span{ 
    padding: 2.66vw;   
    border-radius: 1.33vw;
    float: left;
    margin: 0 4vw 0 4vw;
    border: 1px solid #c7c7c6;
    max-width: 56.5vw;
    /* text-overflow: ellipsis;
    white-space: normal; */
    word-break:break-all;
    font-size: 3.73vw;
    background: #fff;
}
.content li span>img{
    width:100%;
    height:26vw;
}
.content li>img.imgright {
    float: right;
}
.content li span.spanright {
    float: right;
    background: #a0e75a;
}
.select{
    width: 56.8vw;
    height: 11.2vw;
    line-height: 11.2vw;
    padding-left: 2.66vw;
    box-sizing: border-box;
    border-radius: 1.33vw;
    border: 1px solid #c7c7c6;
    margin: 1.86vw 0 1.86vw 0;
    font-size: 3.73vw;
}
.select.beselect{
    background: #b01f24;
    border: 1px solid #b01f24;
    color: #fff;
}
.iselect{
    float: right;
    width: 3.86vw;
    height: 3.86vw;
    background: url('../../static/img/select_bg.png') no-repeat;
    background-size: 7.73vw 3.86vw;
    background-position-x: -3.86vw;
    margin: 3.4vw 2vw 0 0;
}
.iselect.beiselect{
    background-position-x: 0;
}
#answer>ul>li>span.title{
    background: #cecece;
    border-radius: 1.33vw;
    color: #fff;
    font-size: 2.93vw;
    padding: 1.33vw;
    margin-left: 39.73vw !important;
    border: 0;
}
video{
    width: 100%;
    height: 43vw;
}
audio{
    display: none;
}
</style>
